<template>
  <div v-if="img" class="card_box">
    <img :src="img">
  </div>
  <div v-else>
    <div class="flldata login">
      <div class="underline" style="width: 180px">
        <span class="title1 color1 zIndex fontBold">营销人员查询</span>
      </div>
      <div class="login_content">
        <div class="content">
          <div>
            <div class="login_field">
              <van-cell-group>
                <van-field v-model="form.username" center>
                  <template #left-icon>
                    <span class="content3 font400 color3 leftw">姓名</span>
                    <span class="line content3 font400 color3">|</span>
                  </template>
                </van-field>
                <van-field v-model="form.card_number" center>
                  <template #left-icon>
                    <span class="content3 font400 color3 leftw">身份证号</span>
                    <span class="line content3 font400 color3">|</span>
                  </template>
                </van-field>
              </van-cell-group>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="fexd_footer">
    <div v-if="img" class="footer_btn flex align_center justify_between">
      <div @click="back" class="btn_item agree font400 content3 color4">
        返回
      </div>
    </div>
    <div v-else class="footer_btn flex align_center justify_between">
      <div @click="submit" class="btn_item agree font400 content3 color4">
        查询
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Toast } from 'vant'
import { getQueryCardInfo } from '@/api/index'
import { ref } from 'vue'
const img: any = ref()
const form: any = ref(
  {
    username: '',
    card_number: ''
  }
)

const submit = async () => {
  if (!form.value.username) {
    Toast('请输入姓名')
    return
  } else if (!form.value.card_number) {
    Toast('请输入身份证号码')
    return
  }
  try {
    const res: any = await getQueryCardInfo({
      username: form.value.username,
      card_number: form.value.card_number
    })
    console.log(res)
    img.value = res.card_image
  } catch (error: any) {
    console.log(error)
    Toast(error.message)
  }
}

const back = () => {
  img.value = ''
  form.value = {
    username: '',
    card_number: ''
  }
}
</script>

<style lang="less" scoped>
.card_box {
  position: relative;
  text-align: center;
  width: 90%;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 28px 5px #fff1e5;
  background: url(@/assets/img/yx_bg.png) no-repeat;
  background-size: 215px 265px;
  background-position: 115% 115%;

  img {
    width: 100%;
  }
}

.van-cell {
  background: #fff;
}

.flldata {
  padding: 0 30px 80px;
  margin-top: 40px;

  .login_content {
    margin-top: 20px;

    .contentInfo {
      width: 100%;
      background: #f7f7f7;
      border-radius: 10px;
      margin: 20px 0;

      .contentInfoBox {
        padding: 15px;

        p:last-child {
          margin-top: 25px;
        }
      }
    }

    .login_field {
      margin-top: 20px;
    }
  }

  .leftw {
    width: 90px;
    display: inline-block;
  }

  // .line {
  //     margin: 0 30px;
  // }
  .setBnt {
    width: 98px;
    height: 30px;
    background: #12142e;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}

.uploaded-img {
  width: 60px;
  height: 30px;
  object-fit: cover;
  margin-right: 10px;
}

.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  z-index: 10;

  .footer_btn {
    padding: 0 30px;
    height: 100%;

    .agree {
      width: 100%;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }

    .cancle {
      width: 140px;
      height: 44px;
      background: #85898c;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
  }
}

@media (min-width: 750px) {
  .card_box {
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 28px 5px #fff1e5;
    background-size: 215px 265px;
  }

  .flldata {
    padding: 0 30px 80px;
    margin-top: 40px;

    .login_content {
      margin-top: 20px;

      .contentInfo {
        width: 100%;
        background: #f7f7f7;
        border-radius: 10px;
        margin: 20px 0;

        .contentInfoBox {
          padding: 15px;

          p:last-child {
            margin-top: 25px;
          }
        }
      }

      .login_field {
        margin-top: 20px;
      }
    }

    .leftw {
      width: 90px;
      display: inline-block;
    }

    // .line {
    //     margin: 0 30px;
    // }
    .setBnt {
      width: 98px;
      height: 30px;
      background: #12142e;
      border-radius: 5px;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .uploaded-img {
    width: 60px;
    height: 30px;
    object-fit: cover;
    margin-right: 10px;
  }

  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
    z-index: 10;

    .footer_btn {
      padding: 0 30px;
      height: 100%;

      .agree {
        width: 100%;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }

      .cancle {
        width: 140px;
        height: 44px;
        background: #85898c;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }
    }
  }
}
</style>
